<template>
	<div class="login-wrap">
		<h2 class="log-logo tc"><a href="/"><img src="../../assets/images/login/login-logo.png"></a></h2>
		<div class="login-wmain pl5 pr5">
			<div class="log-box mt30">
				<i class="log-ico fa fa-user-o" aria-hidden="true"></i>
				<input class="log-inp" type="text" placeholder="用户名/手机号/邮箱" v-model="username">
			</div>
			<div class="log-box mt30">
				<i class="log-ico fa fa-key" aria-hidden="true"></i>
				<input class="log-inp" type="password" placeholder="密码" v-model="password">
			</div>
			<div class="log-other clearfix pb3">
				<div class="log-tips fl" v-show="tips" v-text="tipstext"></div>
				<span class="forgetpwd fr">&nbsp;<!--忘记密码？--></span>
			</div>
			<button class="log-btn mt5" v-on:click="loginfun" v-text="loadingtext">登录</button>
			<p class="log-reg mt5 tr"><router-link to="/register">还没有账户，立即注册</router-link></router-link></p>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				'username':'',
				'password':'',
				'tipstext':'',
				'tips':false,
				'loadingtext':'登录'
			}
		},
		mounted: function() {
		    document.getElementsByTagName("body")[0].className="bgfff"; 
		},
		methods:{
			loginfun: function(){
				const that = this;
				
				if( this.username == '' || this.username == null ){
					this.tips = true
					this.tipstext = '用户名不能为空！'
					return
				}
				else if( this.password == '' || this.password == null ){
					this.tips = true
					this.tipstext = '密码不能为空！'
					return
				}
				else if ( this.password.length < 6 || this.password.length > 12 ){
					this.tips = true
					this.tipstext = '密码为6-12位长度！'
					return
				}
				this.loadingtext = '登录中...'
				setTimeout(function(){
					that.$router.push("/")
				},2000)
			}
		},
		beforeDestroy () {
		    document.getElementsByTagName("body")[0].className="";
		}
	}
</script>

<style>
	
</style>